<template>
  <view v-show="value" class="comment-mask" @click="$emit('input', false)">
    <!-- 评论弹窗 -->
    <view class="comment-popup" @click.stop>
      <view class="comment-box">
        <!-- 评论输入区域 -->
        <view class="comment-input-area">
          <input class="comment-input" v-model="commentText" placeholder="评论" :focus="value" @confirm="handleSubmit" />
          <view class="toolbar flex-bect">
            <view class="avatar-wrapper" @click="onChooseAvatar">
              <u-icon name="photo" size="60" color="#999"></u-icon>
            </view>
            <text class="emoji-btn" @tap="toggleEmojiPanel">😊</text>
            <button class="submit-btn" :class="{ active: commentText.trim() }" @tap="handleSubmit">发送</button>
          </view>
        </view>
        <view class="images-list flex-lect">
          <view v-for="(item, index) in images" class="item" :key="index" @click="preview(images, index)">
            <image :src="item" mode="aspectFill" class="img"></image>
            <view class="close" @click.stop="delImg(item)"><u-icon name="close-circle-fill" size="30" color="red"></u-icon></view>
          </view>
        </view>
        <!-- 表情面板 -->
        <view class="emoji-panel" v-if="showEmojiPanel">
          <scroll-view scroll-y class="emoji-list">
            <view class="emoji-group">
              <text v-for="(emoji, index) in emojiList" :key="index" class="emoji-item"
                @tap="insertEmoji(emoji)">{{ emoji }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'UuEmojiInput',
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
    },

    emits: ['input', 'submit'],

    data() {
      return {
        commentText: '',
        showEmojiPanel: false,
        emojiList: [
          // 表情类
          '😊', '😂', '🤣', '😍', '😒', '😘', '🤔', '😅', '😭', '😃', '😄', '😁',
          '😆', '😉', '😋', '😎', '😌', '😏', '😐', '😑', '😒', '😓', '😔', '😕',
          '😖', '😗', '😙', '😚', '😛', '😜', '😝', '😞', '😟', '😢', '😤', '😥',

          // 手势类
          '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '👊', '✊', '🤛', '🤜', '👏',

          // 心形类
          '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💕', '💞', '💓', '💗', '💖',

          // 其他符号
          '🎉', '✨', '⭐', '🌟', '💫', '🔥', '💯', '💪', '🤝', '🙏', '💐', '🌸',
          '🎵', '🎶', '💡', '💭', '💬', '🗯️', '💝', '🎁', '🎈', '🎊'
        ],
        images:[]
      }
    },
    methods: {
      preview(images, index) {
      	uni.previewImage({
      		urls: images,
      		current: index,
      		longPressActions: {
      			itemList: ['发送给朋友', '保存图片', '收藏'],
      			success: function(data) {
      				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      			},
      			fail: function(err) {
      				console.log(err.errMsg);
      			}
      		}
      	});
      },
      toggleEmojiPanel() {
        this.showEmojiPanel = !this.showEmojiPanel
      },

      insertEmoji(emoji) {
        this.commentText += emoji
      },

      handleSubmit() {
        if (!this.commentText.trim() && this.images.toString().length === 0)  return uni.showToast({ title: '请输入评论内容', icon: 'none' })
        this.$emit('submit', {
          content: this.commentText,
          images:this.images.toString()
        })
        this.showEmojiPanel = false
        this.$emit('input', false)
      },
      clearInfo(){
        this.commentText = '';
        this.images = [];
      },
      onChooseAvatar(e) {
        uni.chooseImage({
          count: 9,
          success: async chooseImageRes => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            try {
              for(let i = 0; i < tempFilePaths.length; i++){
                let res = await this.$api.goUpload({
                  filePath: tempFilePaths[i]
                });
                console.log(res);
                if(res.code === 1){
                  this.images = [...this.images, res.data.fullurl]
                }
              }
              
            } catch (e) {
              this.$u.toast('上传失败！');
            }
          }
        });
      },
      delImg(e){
        this.images = this.images.filter(n => n != e)
      },
    }
  }
</script>

<style scoped lang="scss">
  .images-list{
    padding-left: 30rpx; padding-top: 20rpx;
    .item{width: 80rpx; height: 80rpx; margin:0 20rpx 20rpx 0; border: 1px solid #ddd; border-radius: 6rpx; padding: 4rpx; position: relative;}
    .img{width: 100%; height: 100%;}
    .close{position: absolute; right: 0; top: 0; transform: translate(50%, -50%); width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center;}
  }
  .comment-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }

  .comment-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }

  .comment-box {
    background-color: #f7f7f7;
    animation: slideUp 0.2s ease-out;
  }

  .comment-input-area {
    display: flex;
    align-items: center;
    padding: 8px 12px;
  }

  .comment-input {
    width: 100%;
    height: 36px;
    background: #fff;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 14px;
    border: none;
  }

  .toolbar {
    display: flex;
    align-items: center; margin-left: 0.3rem;
  }

  .emoji-btn {
    font-size: 24px;
    line-height: 1;
    padding: 4px;
    color: #666; margin: 0 0.16rem;
  }

  .emoji-btn:active {
    opacity: 0.7;
  }

  .submit-btn {
    min-width: 56px; margin: 0;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #ededed;
    color: #999;
    border-radius: 4px;
    font-size: 14px;
    padding: 0;
    border: none;
  }

  .submit-btn.active {
    background: #07c160;
    color: #fff;
  }

  .emoji-panel {
    height: 220px;
    background: #fff;
    border-top: 1px solid #eee;
    animation: slideUp 0.2s ease-out;
  }

  .emoji-list {
    height: 100%;
  }

  .emoji-group {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
  }

  .emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 20px;
  }

  .emoji-item:active {
    background: #f5f5f5;
    border-radius: 4px;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }
</style>